<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
	  <base href="/">
      <title>填写订单信息</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="stylesheet" href="settlement/css/index.css">
      <link rel="stylesheet" href="layui/css/layui.css">
      <style>

          .ismain-checked {
              background-color: yellow; /* 示例样式，可按需修改 */
          }

          .order_box_in {
              width: 400px;
              height: 200px;
              margin-left: 8px;
              margin-bottom: 20px;
              float: left;
              border: 1px solid #C9C5C5;
              border-radius: 5px;
              cursor: pointer;
              color: black;
          }

          .order_box::after {
              content: "";
              display: block;
              clear: both;
          }
      </style>
      <style>
          .order_box_in {
              border: 1px solid #C9C5C5;
              padding: 10px;
          }

          .addressname {
              height: 20px;
              font-weight: bold;
              color: orangered;
              text-align: center;
              font-size: 20px;
              padding: 5px;
          }

          .areatext {
              height: 15px;
              color: dodgerblue;
              text-align: left;
              font-size: 15px;
              padding: 5px;
          }

          .addresstext {
              height: 15px;
              color: dodgerblue;
              text-align: left;
              font-size: 15px;
              padding: 5px;
          }

          .addrname {
              height: 15px;
              color: darkgreen;
              text-align: left;
              font-size: 15px;
              padding: 5px;
          }

          .addrtel {
              height: 15px;
              color: dodgerblue;
              text-align: left;
              font-size: 15px;
              padding: 5px;
          }
      </style>
    


    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/ionicons.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">

    
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body class="goto-here">
		<div class="py-1 bg-black">
    	<div class="container">
    		<div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
	    		<div class="col-lg-12 d-block">
		    		<div class="row d-flex">
		    			<div class="col-md pr-4 d-flex topper align-items-center">
					    	<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-phone2"></span></div>
						    <span class="text">+ 1235 2355 98</span>
					    </div>
					    <div class="col-md pr-4 d-flex topper align-items-center">
					    	<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-paper-plane"></span></div>
						    <span class="text">youremail@email.com</span>
					    </div>
					    <div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right">
						    <span class="text">3-5 Business days delivery &amp; Free Returns</span>
					    </div>
				    </div>
			    </div>
		    </div>
		  </div>
    </div>
        <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
            <div class="container">
                <a class="navbar-brand" href="javascript:;">"鞋梦弄潮"鞋子商城</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="oi oi-menu"></span> Menu
                </button>

                <div class="collapse navbar-collapse" id="ftco-nav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active"><a href="shopping/index" class="nav-link">Home</a></li>
                        <li class="nav-item"><a class="nav-link" id="headUserinfobutton" href="shopping/userinfo">userinfo</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="javascript:;" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cataloge</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown04">
                                <a class="dropdown-item" href="shopping/shop">Shop</a>
                                <a class="dropdown-item" id="headCartbutton" href="shopping/cart">Cart</a>
                            </div>
                        </li>
                        <li class="nav-item"><a href="shopping/about" class="nav-link">About</a></li>
                        <li class="nav-item cta cta-colored"><a href="shopping/cart" id="headCartbutton1" class="nav-link"><span class="icon-shopping_cart"></span>[0]</a></li>

                    </ul>
                </div>
            </div>
        </nav>
        <!-- END nav -->

    <div class="hero-wrap hero-bread" style="background-image: url('image/bg_6.jpg');">
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-9 ftco-animate text-center">
          	<p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home</a></span> <span>Checkout</span></p>
            <h1 class="mb-0 bread">Checkout</h1>
          </div>
        </div>
      </div>
    </div>





        <div class="order_head">
            <div class="head_background">
                <div class="head_box">
                    <a href="index.html" class="head_left_a"><img src="login/img/denglu-milogo.jpg" alt="" class="head_left_p"></a>
                    <h1 class="head_h1">确认订单</h1>

                </div>
            </div>
        </div>
        <div class="order_body layui-container">
            <div class="order_body_background">
                <div class="order_line">
                    <div class="order_lien_in">
                        <h3 class="order_title">收货地址</h3>
                    </div>
                    <div class="order_lien_in"></div>
                </div>
                <div class="layui-row layui-col-space15" name="addressbox" >

                </div>
                <div class="order_line order_line_bordtr">
                    <div class="order_lien_in">
                        <h3 class="order_title">商品及优惠券</h3>
                    </div>
                </div>
                <div id="products" class="layui-form" lay-filter="products">

                </div>
                <div class="order_line ">
                    <div class="order_lien_in">
                        <p class="order_price_11">商品件数:</p>
                    </div>
                    <div class="order_price1">
                        <p class="order_price_2" easy="totalnumber">1件</p>
                    </div>
                </div>
                <div class="order_line ">
                    <div class="order_lien_in">
                        <p class="order_price_11">金额合计:</p>
                    </div>
                    <div class="order_price1">
                        <p class="order_price_2" easy="total"></p>
                    </div>

                </div>
                <div class="order_line order_line_bordtr">
                    <div class="order_lien_in">
                        <p class="order_price_11"><br>应付总额:</p>
                    </div>
                    <div class="order_price1">
                        <p class="order_price_2">$<span style="font-size: 35px" easy="total">999</span></p>

                    </div>
                </div>
                <div class="pay">
                    <a href="javascript:;" class="pay_a" id="jiesuanBtn">结算</a>
                </div>

            </div>
        </div>





    <footer class="ftco-footer ftco-section">
      <div class="container">
      	<div class="row">
      		<div class="mouse">
						<a href="javascript:;" class="mouse-icon">
							<div class="mouse-wheel"><span class="ion-ios-arrow-up"></span></div>
						</a>
					</div>
      	</div>
        <div class="row mb-5">
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Minishop</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
              <ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-twitter"></span></a></li>
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-facebook"></span></a></li>
                <li class="ftco-animate"><a href="javascript:;"><span class="icon-instagram"></span></a></li>
              </ul>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4 ml-md-5">
              <h2 class="ftco-heading-2">Menu</h2>
              <ul class="list-unstyled">
                <li><a href="javascript:;" class="py-2 d-block">Shop</a></li>
                <li><a href="javascript:;" class="py-2 d-block">About</a></li>
                <li><a href="javascript:;" class="py-2 d-block">Journal</a></li>
                <li><a href="javascript:;" class="py-2 d-block">Contact Us</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-4">
             <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Help</h2>
              <div class="d-flex">
	              <ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
	                <li><a href="javascript:;" class="py-2 d-block">Shipping Information</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Returns &amp; Exchange</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Terms &amp; Conditions</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Privacy Policy</a></li>
	              </ul>
	              <ul class="list-unstyled">
	                <li><a href="javascript:;" class="py-2 d-block">FAQs</a></li>
	                <li><a href="javascript:;" class="py-2 d-block">Contact</a></li>
	              </ul>
	            </div>
            </div>
          </div>
          <div class="col-md">
            <div class="ftco-footer-widget mb-4">
            	<h2 class="ftco-heading-2">Have a Questions?</h2>
            	<div class="block-23 mb-3">
	              <ul>
	                <li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
	                <li><a href="javascript:;"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
	                <li><a href="javascript:;"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
	              </ul>
	            </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center">

            <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
          </div>
        </div>
      </div>
    </footer>
    
  

  <!-- loader -->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"></circle><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"></circle></svg></div>


  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/scrollax.min.js"></script>

  <script src="js/google-map.js"></script>
  <script src="js/main.js"></script>
        <script src="layui/layui.all.js"></script>

        <script type="text/html" id="addressitem">
            <div class='order_box_in layui-form' easy="address">

                <div><input class="addressid" type="hidden"/></div>
                <div class='addressname' style="">

                </div>
                <div  style="margin-top:8px">
                    地址:<span class="areatext"></span>
                </div>
                <div class='' style="margin-top:8px;">
                    详细地址:<span class="addresstext"></span>
                </div>
                <div class='layui-row' style="margin-top:8px;">
                    <div class=' layui-col-md6'>
                        联系人:<span class="addrname"></span>
                    </div>
                    <div class=' layui-col-md6'>
                        联系电话:<span class="addrtel"></span>
                    </div>
                </div>
                <div  style="margin-top:8px" class="layui-row">
                    <div class="layui-col-md6 " >
                        <input type='radio'  name="ismain" value="0" _addrid=''>
                    </div>

                </div>
            </div>
        </script>

        <script type="text/html" id="addAddress">
            <div class='order_box_in layui-form' addAddress style="text-align: center;line-height: 170px;font-size: 30px">
                +
            </div>
        </script>
        <script id="productitem" type="text/html">
            <div class="layui-row" easy="proitem" style="height:50px;line-height: 50px;">
                <div class="layui-col-md5">
                    <input type="hidden" name="id">
                    <img easy="proimg" style="height: 18px; width: 27px" src="settlement/img/A4.png"
                         alt=""/>
                    <span easy="proname">小米电视A4 32寸 黑色 32 寸</span>
                </div>
                <div class="layui-col-md2">
                    <label class="layui-form-label">*$<span easy="proprice">899</span></label>
                    <div class="layui-input-block">
                        <input type="text" style="width:40px;" name="number" easy="pronumber" class="layui-input">
                    </div>
                </div>

                <div class="layui-col-md4" style="text-align: center;">
                    <p easy="subtotal">899</p>

                </div>
                <div class="layui-col-md1">
                    <button type='button' easy="deletebtn"
                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">删除
                    </button>
                </div>
                <hr class="layui-border-orange">
            </div>
        </script>

        <script th:inline="javascript">
            const $ = layui.$;
            const layer = layui.layer;
            const form=layui.form;
            /*地址复选框*/
            // 修改 showArea 函数，添加回调函数
            function showArea(code, $dom, callback) {
                $.ajax({
                    url: "https://restapi.amap.com/v3/config/district",
                    data: { key: 'c1af0183a6f70f28c8c07a80fed28655', keywords: code },
                    success: function (result) {
                        let children = result.districts[0].districts;
                        $dom.empty();
                        $dom.append($("<option value=''></option>"));
                        for (let i = 0; i < children.length; i++) {
                            $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                        }
                        form.render("select");
                        if (callback) {
                            callback();
                        }
                    },
                    error: function (error) {
                        console.error('获取地区数据出错:', error);
                        if (callback) {
                            callback();
                        }
                    }
                });
            }  // showArea(100000, $("[name='provincecode']"));
            form.on('select(provincecode)', function (data) {
                let provincecode = data.value; //得到被选中的值
                showArea(provincecode, $("[name='citycode']"));
                let provincename = $(data.othis).find("input").val();
                $("[name='province']").val(provincename);
            });
            form.on('select(citycode)', function (data) {
                let citycode = data.value; //得到被选中的值
                showArea(citycode, $("[name='areacode']"));
                let cityname = $(data.othis).find("input").val();
                $("[name='city']").val(cityname);
            });
            form.on('select(areacode)', function (data) {
                let areaname = $(data.othis).find("input").val();
                $("[name='area']").val(areaname);
            });

            var editlayer;
            var addlayer;
            $("[name='addressbox']").on("click", "[addAddress]", function () {
                showArea(100000, $("[name='provincecode']"));
                addlayer = layer.open({
                    type: 1,
                    area: ["400px", "600px"],
                    content: $("#addAddressWin")
                });
            });





            //新增收货地址保存
            form.on("submit(addAddressBtn)", function (obj) {
                let formdata = obj.field;
                $.ajax({
                    url: 'address/add',
                    data: formdata,
                    async:false,
                    success: function (result) {
                        layer.msg("添加成功", {icon: 1, time: 1800});
                        layer.close(addlayer);
                    }
                });
                showAddress();
            });

            //编辑收货地址保存
            form.on("submit(editAddressBtn)", function (obj) {
                let formdata = obj.field;
                $.ajax({
                    url: 'address/edit',
                    data: formdata,
                    async:false,
                    success: function (result) {
                        layer.msg("编辑成功", {icon: 1, time: 1800});
                        layer.close(editlayer);
                    }
                });
                showAddress();
            });


            let selectedAddressID = 0;  //选中的地址ID
            function showAddress() {
                $.ajax({
                    url: "address/getaddressbyuserid",
                    success: function (result) {
                        $("[name='addressbox']").empty();
                        let data = result.data;
                        for (let i = 0; i < data.length; i++) {
                            let itemtext = $("#addressitem").text();
                            let $item = $(itemtext);
                            $item.find(".addressid").text(data[i].id);
                            $item.find("[name='ismain']").text(data[i].ismain);
                            $item.find(".addressname").text(data[i].addressname);
                            $item.find(".areatext").text(data[i].province + "-" + data[i].city + "-" + data[i].area);
                            $item.find(".addresstext").text(data[i].address);
                            $item.find(".addrname").text(data[i].name);
                            $item.find(".addrtel").text(data[i].phone);
                            if (data[i].ismain === 1) {
                                selectedAddressID=data[i].id;
                                $item.find("[type='radio']").prop("checked", true);
                                $item.addClass('ismain-checked'); // 添加样式类
                            } else {
                                $item.find("[type='radio']").prop("checked", false);
                                $item.removeClass('ismain-checked'); // 移除样式类
                            }
                            $("[name='addressbox']").append($item);
                            // 为编辑按钮绑定数据
                            $item.find("[name='edit']").data('addressData', data[i]);
                            $item.find("[name='delete']").data('addressData', data[i]);

                            // 为.order_box_in 绑定点击事件，排除编辑和删除按钮
                            $item.click(function (e) {
                                if (!$(e.target).is('button')) {
                                    let radio = $(this).find("[type='radio']");
                                    // 取消其他所有单选框的选中状态，并移除样式类
                                    $("[name='addressbox'] [type='radio']").not(radio).prop('checked', false).parent().parent().parent().removeClass('ismain-checked');
                                    $("[name='addressbox'] [type='radio']").not(radio).val(0);
                                    radio.prop("checked", true);
                                    radio.val(1); // 将选中的单选框的值设为 1
                                    radio.parent().parent().parent().addClass('ismain-checked'); // 为选中的单选框所在的父元素添加样式类
                                    selectedAddressID =$(this).find(".addressid").text();
                                    //选择收货地址
                                }
                            });
                        }

                        // 事件委托绑定编辑按钮点击事件
                        $("[name='addressbox']").on('click', "[name='edit']", function () {
                            const addressData = $(this).data('addressData');
                            const loadProvince = new Promise((resolve) => {
                                showArea(100000, $("[name='provincecode']"), resolve);
                            });

                            loadProvince.then(() => {
                                editlayer = layer.open({
                                    type: 1,
                                    area: ["400px", "600px"],
                                    content: $("#editAddressWin")
                                });

                                // 先设置表单值
                                form.val("editAddress", addressData);

                                // 设置省份下拉框选中项
                                $("#editAddressWin [name='provincecode'] option[value='" + addressData.provincecode + "']").prop('selected', true);
                                form.render('select');

                                // 设置城市下拉框选中项
                                const provincecode = addressData.provincecode;
                                const loadCity = new Promise((resolve) => {
                                    showArea(provincecode, $("[name='citycode']"), resolve);
                                });

                                loadCity.then(() => {
                                    $("#editAddressWin [name='citycode'] option[value='" + addressData.citycode + "']").prop('selected', true);
                                    form.render('select');

                                    // 设置区划下拉框选中项
                                    const citycode = addressData.citycode;
                                    const loadArea = new Promise((resolve) => {
                                        showArea(citycode, $("[name='areacode']"), resolve);
                                    });

                                    loadArea.then(() => {
                                        $("#editAddressWin [name='areacode'] option[value='" + addressData.areacode + "']").prop('selected', true);
                                        form.render('select');
                                    });
                                });
                            });
                        });



                        // 事件委托绑定删除按钮点击事件
                        $("[name='addressbox']").on('click', "[name='delete']", function () {
                            let addressData = $(this).data('addressData');
                            layer.confirm("确认要删除吗?", function () {
                                $.ajax({
                                    url: 'address/delete',
                                    data: { id: addressData.id },
                                    success: function () {
                                        layer.msg("删除成功", { time: 1800, icon: 1 });
                                        showAddress();
                                    }
                                });
                            });
                        });

                        if (data.length < 6) {
                            let itemtext = $("#addAddress").text();
                            let $item = $(itemtext);
                            $("[name='addressbox']").append($item);
                        }
                    }
                });
            }

            showAddress();





            //显示购买商品数据
            const productids =/*[[${productids}]]*/;
            const counts =/*[[${counts}]]*/;
            if (!productids || !counts) {
                layer.msg("系统异常,请重新选购", {icon: 3})
                setTimeout(function () {
                    location.href = "shopping/index";
                }, 3000);
            }
            const proidArr = productids.split(",");
            const countArr = counts.split(",");
            if (proidArr.length != countArr.length || proidArr.length == 0 || countArr.length == 0) {
                layer.msg("系统异常,请重新选购", {icon: 3})
                setTimeout(function () {
                    location.href = "shopping/index";
                }, 3000);
            }
            let total=0;
            let totalnumber=0;
            for (let i = 0; i < proidArr.length; i++) {
                let proid = proidArr[i];
                let count = countArr[i];
                $.ajax({
                    url: 'product/getproductById',
                    data: {id: proid},
                    async: false,
                    success: function (result) {
                        let data = result.data;
                        console.log(data);
                        let item = $("#productitem").text();
                        let $item = $(item);
                        $item.find("[name='id']").val(data.id);
                        let mainImageUrl = "";
                        if (data.imgurl && data.imgurl.length > 0) {
                            for (let j = 0; j < data.imgurl.length; j++) {
                                if (data.imgurl[j].is_main === 1) {
                                    mainImageUrl = data.imgurl[j].imgurl;
                                    break;
                                }
                            }
                        }
                        $item.find("[easy='proimg']").attr("src", mainImageUrl);
                        $item.find("[easy='proname']").text(data.name);
                        $item.find("[easy='proprice']").text(data.price);
                        $item.find("[easy='pronumber']").val(count);
                        $item.find("[easy='subtotal']").text(Number(data.price) * Number(count));
                        total+=(Number(data.price) * Number(count));
                        totalnumber+=Number(count);
                        $("#products").append($item);
                    }
                });
            }
            $("[easy='total']").text(total);
            $("[easy='totalnumber']").text(totalnumber);


            //数量发生变化
            $("[easy='pronumber']").change(function(){
                let number=$(this).val();
                let price=$(this).parents("[easy='proitem']").find("[easy='proprice']").text();
                if(number<1){
                    $(this).val(1);
                }
                if(number>99){
                    $(this).val(99);
                }
                number=$(this).val();
                let subtotal=Number(number)*Number(price);
                $(this).parents("[easy='proitem']").find("[easy='subtotal']").text("$"+subtotal);
                total=0
                totalnumber=0;
                $("[easy='proitem']").each(function(idex,item){
                    let number=$(item).find("[easy='pronumber']").val();
                    let price=$(item).find("[easy='proprice']").text();
                    total+=(Number(price) * Number(number));
                    totalnumber+=Number(number);
                });
                $("[easy='total']").text(total);
                $("[easy='totalnumber']").text(totalnumber);
            })
            //结算
            $("#jiesuanBtn").click(function(){
                $(this).prop("disabled",false);
                let formdata={
                    id:[],
                    quantity:[]
                };
                $("[name='id']").each(function(index,item){
                    formdata.id.push($(item).val());
                });

                $("[name='number']").each(function(index,item){
                    formdata.quantity.push($(item).val());
                });

                formdata.addressid=selectedAddressID;
                //向后台传递的参数有
                //1  要购买的商品的id
                //2  要购买商品的数量
                //3  选中的收货地址的id
                $.ajax({
                    url:"orders/add",
                    data:formdata,
                    success:function(result){
                        console.log(result);
                        let code=result.code;
                        let data=result.data;
                        let msg=result.msg;
                        if(code==200){
                            location.href="shopping/payment?id="+data;
                        }else{
                            layer.msg("订单创建失败",{icon:2});
                        }
                    }
                });
            });
        </script>

        <script>

            function showCartCount() {
                $.ajax({
                    url: 'cart/showCartCount',
                    async: false,
                    success: function (result) {

                        console.log(result);

                        let data = result.data;
                        if (!data)
                        {
                            $("#headCartbutton1").text("CART["+0+"]");

                        }else {
                            $("#headCartbutton1").text("CART["+data+"]");
                        }

                    }
                });
            }  //这是顶部导航栏的购物车参数展示
            showCartCount();

        </script>
  </body>
</html>